<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益设置</el-breadcrumb-item>
        <el-breadcrumb-item>添加权益</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail ">
      <el-tabs v-model="activeName">
        <el-tab-pane label="选择权益类型" name="first" :disabled="true">
          <el-form ref="rulePowerForm" :rules="rulePowerFormRulesFirst"  :model="rulePowerForm">

            <el-form-item class="mb30 pl10">
              <span class="turnInlineBlock color333 font16">所属组织：</span>
              <span class="turnInlineBlock color333 font16">  {{rulePowerForm.deptName}}</span>
            </el-form-item >
            <el-form-item prop="legalRuleName" class="mb10" >
              <span style="color:red">*</span>
              <span class="color333 font16">权益名称：</span>
              <el-input v-model="rulePowerForm.legalRuleName"  maxlength="20" :size="size" class="w326" clearable placeholder="输入权益名称"></el-input>
            </el-form-item>
            <p class="mb20 font12 colorE7 pl95">最多输入20个字符</p>
            <el-form-item  prop="legalRuleType" class="mb120" >
              <span style="color:red">*</span>
              <span class="color333 font16">权益类型：</span>
              <el-select v-model="rulePowerForm.legalRuleType" @change="selectModel($event)" class="w326 mb20" placeholder="输入权益类型" :size="size" :disabled="showType" clearable >
                <el-option
                  v-for="item in ruleTypeList"
                  :key="item.id"
                  :label="item.ruleName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-form-item v-if="rulePowerForm.legalRuleType==7"><span class="mb20 font12 colorE7 pl95">注：该类型仅VIP会员设置使用：购买VIP，当前等级自动升级一个级别</span></el-form-item>
            </el-form-item>
            <div class="t_c">
              <el-button :size="size" @click.native="back" type="primary" plain class="mr60">{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary"  @click="nextStepRulePower(1)" :loading="editLoading">下一步</el-button>
            </div>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="创建权益规则" :disabled="true" name="second">
          <el-form ref="rulePowerForm" :rules="rulePowerFormRules" :model="rulePowerForm" :size="size">
           <el-row v-if="rulePowerForm.legalRuleType==1">
             <el-form-item class="mb30">
               <span class="font16 color000">购物权益</span>
             </el-form-item>
              <el-form-item  prop="ruleValue" class="labelTextSize14 mb120">
                <span style="color:red">*</span>
                <span class="color333 font16">购物全场：</span>
                <el-input placeholder="请输入" v-model="rulePowerForm.ruleValue" maxlength="5" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" class="w326"></el-input><span class="turnInlineBlock m_l10 font14 color333">折</span>
              </el-form-item>
           </el-row>
           <el-row v-if="rulePowerForm.legalRuleType==2">
             <el-form-item >
               <span class="font16 color000">积分权益</span>
             </el-form-item>
              <el-form-item  prop="ruleValue" class="labelTextSize14 mb120" >
                <span style="color:red">*</span>
                <span class="color333">下单多赠送：</span>
                <el-input placeholder="请输入" v-model="rulePowerForm.ruleValue" clearable maxlength="5" @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" class="w326"></el-input><span class="turnInlineBlock m_l10 font14 color333">倍积分</span>
              </el-form-item>
           </el-row>
           <el-row v-if="rulePowerForm.legalRuleType==3">
             <el-form-item class="mb30">
               <span class="font16 color000">物流权益</span>
             </el-form-item>
             <el-form-item class="mb30">
                <el-radio-group v-model="rulePowerForm.freightMode" @change="changeDemo">
                      <el-radio :label="1" class="form-radio mr60">免运费</el-radio>
                      <el-radio :label="2" class="form-radio">减运费</el-radio>
                </el-radio-group>
             </el-form-item>
              <el-form-item v-if="rulePowerForm.freightMode == 2" class="mb120">
                <div v-for="(item,index) in rulePowerForm.logisticsIncrement" :key="index" >
                  <el-form-item class="mb30">
                      <div class="flex" style = "text-align:center">
                      <span style="color:red;margin-top:10px">*</span>
                      <el-form-item  label="下单满：" class="labelTextSize14 formItemNoMargin " style="width:670px" >
                          <el-input  type="text" v-model="rulePowerForm.logisticsIncrement[index].satisfyOrder" maxlength="5" placeholder="输入数字" @input="rulePowerForm.logisticsIncrement[index].satisfyOrder=rulePowerForm.logisticsIncrement[index].satisfyOrder.replace(/[^\d.]/g,'')" class="inputWidth200" clearable></el-input>
                          <span class="turnInlineBlock m_l5 font14 color333 mr5">元，减免</span>
                          <el-input  type="text" v-model="rulePowerForm.logisticsIncrement[index].reductionMoney" placeholder="输入数字"
                          @input="rulePowerForm.logisticsIncrement[index].reductionMoney=rulePowerForm.logisticsIncrement[index].reductionMoney.replace(/[^\d.]/g,'')" maxlength="5" class="inputWidth200" clearable></el-input>
                          <span class="turnInlineBlock m_l5 font14 color333">元运费</span>
                        <el-button :size="size" type="text"  @click="addOrderGivenStairArr(index)" v-show="index==0">添加</el-button>
                        <el-button :size="size" type="text" class="textRed noMarginL"  @click="deelteOrderGivenStairArr(index)" v-show="index != 0">删除</el-button>
                      </el-form-item>
                    </div>
                  </el-form-item>
                </div>
              </el-form-item>
           </el-row>
           <el-row v-if="rulePowerForm.legalRuleType==4">
             <el-form-item>
               <span  class="font16 color000">活动特权</span>
             </el-form-item>
              <el-form-item prop="ruleValue" class="labelTextSize14 mb120">
                <span style="color:red">*</span>
                <span class="color333">抽奖活动每日赠送：</span>
                <el-input placeholder="请输入" v-model="rulePowerForm.ruleValue" class="w326" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" maxlength="5"></el-input><span class="turnInlineBlock m_l10 font14 color333">次</span>
              </el-form-item>
           </el-row>
           <el-row v-if="rulePowerForm.legalRuleType==5">
             <el-form-item>
               <span class="font16 color000">内容特权</span>
             </el-form-item>
              <el-form-item prop="ruleValue" class="labelTextSize14 mb120">
                <span style="color:red">*</span>
                <span class="color333">免费查看：</span>
                <el-input placeholder="请输入" v-model="rulePowerForm.ruleValue" class="w326" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" maxlength="5"></el-input><span class="turnInlineBlock m_l10 font14 color333">付费板块</span>
              </el-form-item>
           </el-row>
           <el-row v-if="rulePowerForm.legalRuleType==6" class="mb120">
             <el-form-item >
               <span class="font16 color000">服务特权</span>
             </el-form-item>
              <el-form-item >
                <span style="color:red">*</span>
                <span class="font14 color333">拥有专有客服</span>
              </el-form-item>
           </el-row>
           <el-row v-if="rulePowerForm.legalRuleType==7" class="mb120">
             <el-form-item>
               <span class="font16 color000">等级升级</span>
             </el-form-item>
              <el-form-item >
                <span style="color:red">*</span>
                <span class="font14 color333">购买VIP，自动从当前等级升级一个等级。</span>
              </el-form-item>
           </el-row>

          </el-form>
          <div class="t_c">
            <el-button :size="size" type="primary" @click="upStep(2)" :loading="editLoading" class="mr60">上一步</el-button>
            <el-button :size="size" type="primary" @click="nextStepRulePower(3)" :loading="editLoading" v-show="detailShow" class="mr60">下一步</el-button>
            <el-button :size="size" type="primary" @click="returnRuleList" v-show="!detailShow">返回规则列表</el-button>
          </div>
        </el-tab-pane>

        <el-tab-pane label="选择权益范围" :disabled="true" name="fourth" v-if="this.rulePowerForm.legalRuleType == 1 || this.rulePowerForm.legalRuleType == 2 || this.rulePowerForm.legalRuleType ==3">
          <el-form ref="ruleRangeForm"  :model="ruleRangeForm" :size="size" class="centerForm">
          <div class="tab-container tab-container-noPadding active3">
          <el-tabs type="border-card">
            <!-- 店铺信息 -->
            <el-tab-pane label="选择店铺">
              <el-row>
                <el-row>
                  <div>
                    <el-form :inline="true" :model="storeSearchForm" size="mini" ref="storeSearchForm">
                      <el-row class="search-input">
                      <el-form-item label="所属平台：" prop="childName" class="mr30">
                        <el-select v-model="storeSearchForm.childName"  placeholder="全部" clearable>
                          <el-option
                            v-for="item in deptOption"
                            :key="item.id"
                            :label="item.childName"
                            :value="item.childName"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="店铺编码：" prop="storeCode">
                        <el-input v-model="storeSearchForm.storeCode" clearable placeholder="输入店铺编码" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="店铺名称：" prop="storeName">
                        <el-input v-model="storeSearchForm.storeName" clearable placeholder="输入店铺名称" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="所属商家：" prop="merchantName">
                        <el-input v-model="storeSearchForm.merchantName" clearable placeholder="输入所属商家" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="店铺类型：" prop="storeType">
                          <el-select v-model="storeSearchForm.storeType" placeholder="全部" size="mini" clearable>
                          <el-option label="自营店铺" value="0"></el-option>
                          <el-option label="入驻店铺" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                      </el-row>
                    </el-form>
                    <el-row class="search-button">
                        <el-button type="primary" size="mini" @click="storeSearch()" icon="el-icon-search">搜索</el-button>
                        <el-button type="primary" plain  size="mini"  @click="resetStoreSearch()">重置</el-button>
                        <el-button type="primary" size="mini" @click="querySupplierListForAdd2()">添加店铺</el-button>
                        <el-button type="primary" size="mini" @click="deletePowerStore()">批量删除</el-button>
                        <el-button type="primary" size="mini" @click="addAllStore()">添加全部店铺</el-button>
                    </el-row>
                  </div>
                </el-row>
                <div class=" w100 overh mb30">
                  <div class="f_l">
                    <el-button  type="primary"  plain  size="mini" v-if="storeTableDataTatol<=9999">已选店铺({{storeTableDataTatol}})</el-button>
                    <el-button type="primary" plain size="mini" v-else>已选店铺(9999+)</el-button>
                  </div>
                </div>
              </el-row>
              <el-table :data="storeTableData"  @selection-change="storeTableDataselectionChange" >
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="店铺编号">
                  <template slot-scope="scope">
                    <span>{{ scope.row.storeCode}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="店铺名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.storeName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="店铺类型">
                   <template slot-scope="scope">
                    <span v-if="scope.row.storeType =='1'">入驻店铺</span>
                    <span v-if="scope.row.storeType =='0'">自营店铺</span>
                  </template>
                </el-table-column>
                <el-table-column label="所属商家">
                  <template slot-scope="scope">
                    <span>{{ scope.row.merchantName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" class="textButton" @click="deletePowerStore(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--分页栏-->
              <div class="toolbar t_r mb120">
                <el-pagination
                  layout="total, sizes, prev, pager, next, jumper"
                  @current-change="mainSroreMerchantRefreshPageRequest"
                  :current-page="mainStoreMerchantForm.pageNo"
                  :page-size="mainStoreMerchantForm.pageSize"
                  :total="storeTableDataTatol"
                  :page-sizes="[10, 20, 30, 40]"
                  @size-change="mainSroreMerchantHandleSizeChange"
                ></el-pagination>
              </div>
            </el-tab-pane>
            <!-- 商品信息 -->
            <el-tab-pane label="选择商品">
              <el-row>
                <div>
                  <el-form :inline="true" :model="merchantProductSearchForm" size="mini" ref="merchantProductSearchForm" >
                    <el-row class="search-input">
                    <el-form-item label="商品分类：" prop="categoryName" class="mb30">
                      <el-input v-model="merchantProductSearchForm.categoryName" clearable maxlength="80" placeholder="输入商品分类"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码：" prop="mpCode" class="mb30">
                      <el-input v-model="merchantProductSearchForm.mpCode" clearable maxlength="80" placeholder="输入商品编码"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称：" prop="mpName" class="mb30">
                      <el-input v-model="merchantProductSearchForm.mpName" clearable maxlength="80" placeholder="输入商品名称"></el-input>
                    </el-form-item>
                    </el-row>
                  </el-form>
                 <el-row class="search-button">
                      <el-button type="primary" size="mini" @click="powerProductSearch()" icon="el-icon-search">搜索</el-button>
                      <el-button type="primary" plain size="mini" @click="resetProductTable()">重置</el-button>
                      <el-button type="primary" size="mini" @click="add">添加商品</el-button>
                      <el-button type="primary" size="mini" @click="deletePowerProductsByBatch">批量删除</el-button>
                      <el-button type="primary" size="mini" @click="saveAllProductInfo">添加全部商品</el-button>
                 </el-row>
                </div>
                <div class="row-line-button">
                <el-button  type="primary"  plain  size="mini" v-if="merchantProductTableDataTotal<=9999">已选商品({{merchantProductTableDataTotal}})</el-button>
                <el-button type="primary" plain size="mini" v-else>已选商品(9999+)</el-button>
              </div>
              </el-row>
              <el-table
                  :data="merchantProductTableData"
                  :size="size"
                  row-key="id"
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  @selection-change="repelSelectionChange"
                  class="tableStyle"
                >
                  <el-table-column type="selection" width="55" align="center"></el-table-column>
                  <el-table-column prop="mpCode" label="商品编码" width="180" align="left"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180" sortable align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mpName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="storeName" label="商品分类" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.categoryName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="salePrice" label="商品价格" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.salePrice}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="storeName" label="所属店铺" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.storeName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="merchantName" label="所属商家" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.merchantName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right" align="center" width="200">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="deletePowerProducts(scope.row.id,scope.row.mpParentId)" type="text">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页栏-->
                <div class="toolbar t_r mb120">
                  <el-pagination
                    @size-change="handleSizeChangeMerchantProductTableData"
                    @current-change="handleCurrentChangeMerchantProductTableData"
                    :current-page="merchantProductSearchForm.start"
                    :page-sizes="[10]"
                    :page-size="merchantProductSearchForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="merchantProductTableDataTotal"
                  ></el-pagination>
                </div>
            </el-tab-pane>
            <!-- 选择参与店铺 -->
            <el-dialog :title="'添加店铺'" :visible.sync="storeVisible" :close-on-click-modal="false">
              <div>
                <div>
                  <el-form :inline="true" :model="storeForm" size="mini" ref="storeForm" class="formItemNoMarginR">
                    <el-form-item label="店铺名称：" prop="storename">
                      <el-input v-model="storeForm.storename" placeholder="输入店铺名称" size="mini" clearable maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺编号：" prop="storecode">
                      <el-input v-model="storeForm.storecode" placeholder="输入店铺编号" size="mini" clearable maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="所属商家：" prop="merchantName">
                      <el-input v-model="storeForm.merchantName" placeholder="输入所属商家" size="mini" clearable maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺类型：" prop="storeType" class="mb30">
                      <el-select v-model="storeForm.storeType" placeholder="全部" size="mini" clearable>
                        <el-option label="自营店铺" value="0"></el-option>
                        <el-option label="入驻店铺" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <el-row class="mb30 t_r">
                    <el-button type="primary" @click="storeFormFind()" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" plain @click="resetStoreForm()">重置</el-button>
                  </el-row>
                </div>
                <div>
                  <el-table
                    :data="storeTableData2"
                    @selection-change="storeTableData2AddSelectionChange"
                  >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="店铺编号">
                      <template slot-scope="scope">
                        <span>{{ scope.row.storeCode}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="店铺名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.storeName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="storeType" label="店铺类型">
                      <template slot-scope="scope">
                        <span v-if="scope.row.storeType == '0'">自营店铺</span>
                        <span v-if="scope.row.storeType == '1'">入驻店铺</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="所属商家">
                      <template slot-scope="scope">
                        <span>{{ scope.row.merchantName}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!--分页栏-->
                  <div class="toolbar t_r mb40" v-if="storeTableData2.length > 0">
                    <el-pagination
                      layout="total, sizes, prev, pager, next, jumper"
                      @current-change="refreshPageRequestStore"
                      :current-page="merchantFormStore.start"
                      :page-size="merchantFormStore.limit"
                      :total="merchantTableDataTatolStore"
                      :page-sizes="[10, 20, 30, 40]"
                      @size-change="handleSizeChangeStore"
                    ></el-pagination>
                  </div>
                </div>
              </div>
              <div slot="footer" class="dialog-footer t_c">
                <el-button type="primary" plain :size="size" @click.native="storeVisible = false">取消</el-button>
                <el-button :size="size" type="primary"  @click="AddStore">确定</el-button>
              </div>
            </el-dialog>
            <!-- 添加商品 -->
            <el-dialog :visible.sync="productVisible" title="添加商品" :close-on-click-modal="false">
              <div>
                <div>
                  <el-form inline :model="productForm" ref="productForm" :size="size" class="formItemNoMarginR">
                      <el-form-item label="商品名称：" prop="goodsName" class="w200">
                        <el-input v-model="productForm.goodsName" auto-complete="off" clearable placeholder="请输入商品名称" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="商品编码：" prop="thirdSpuId" class="w200">
                        <el-input v-model="productForm.thirdSpuId" auto-complete="off" clearable placeholder="请输入商品编号" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="商品类目：" prop="goodsCategory" class="mb30 w200">
                        <el-input v-model="productForm.goodsCategory" auto-complete="off" clearable placeholder="请输入类目名称" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="所属商家：" prop="merchantName" class="mb30 w200">
                        <el-input v-model="productForm.merchantName" auto-complete="off" clearable placeholder="输入所属商家" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="所属店铺：" prop="storeName" class="mb30 w200">
                        <el-input v-model="productForm.storeName" auto-complete="off" clearable placeholder="输入所属店铺" maxlength="80"></el-input>
                      </el-form-item>
                  </el-form>
                  <el-row class="mb30 t_r">
                    <el-button type="primary" size="mini" @click="productFormFind()" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" plain size="mini" @click="resetProductForm()">重置</el-button>
                  </el-row>
                </div>
                <div>
                  <el-table
                    :data="tableDataTwo"
                    @selection-change="addSelectionChangeProduct"
                    :header-cell-style="tableHeaderColor"
                    ref="multipleTable"
                    :row-class-name="tableRowClassName"
                    :size="size"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="code" label="商品编码" sortable align="center"></el-table-column>
                    <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
                    <el-table-column prop="goodsCategory" label="商品类目" align="center"></el-table-column>
                    <el-table-column prop="salePriceScope" label="原价（元）" align="center"></el-table-column>
                    <el-table-column prop="storeName" label="所属店铺" align="center"></el-table-column>
                  </el-table>
                  <!--分页栏-->
                  <div class="toolbar t_r" v-if="tableDataTwo.length > 0">
                    <el-pagination
                      @size-change="producthandleSizeChange"
                      @current-change="producthandleCurrentChange"
                      :current-page="productForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="productForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="productListTotal"
                    ></el-pagination>
                  </div>
                </div>
              </div>
              <div slot="footer" class="dialog-footer" style="text-align:center">
                <el-button type="primary" plain :size="size" @click.native="productVisible = false">取消</el-button>
                <el-button :size="size" type="primary" @click.native="productVisible = false" @click="productAddClick"
                >确定</el-button>
              </div>
            </el-dialog>
          </el-tabs>
          </div>
          </el-form>
          <div class="t_c">
            <el-button :size="size" type="primary" @click="upStep(3)" :loading="editLoading" class="mr60">上一步</el-button>
            <el-button :size="size" type="primary" @click="nextStepRulePower(4)" :loading="editLoading" v-show="detailShow" class="mr60">下一步</el-button>
            <el-button :size="size" type="primary" @click="returnRuleList" v-show="!detailShow">返回规则列表</el-button>
          </div>
        </el-tab-pane>

        <el-tab-pane label="创建成功" :disabled="true" name="fifth">
          <div class="mb120">
            <span
              class="font16"
            >
            <img src="../../../../assets/success.png" class="successImg" />
            创建成功</span>
            <img v-bind:src="imgUrl" />
          </div>
          <div class="t_c">
            <el-button :size="size" type="primary" @click="back">返回规则列表</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import marketRequest from "@/market/request/marketRequest";
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";
import XLSX from "xlsx";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      type:this.$route.query.type,
      id:this.$route.query.id,
      showType:false,
      legalRuleId:null,
      storeTableDataSelection: [],
      productAddSelection: [],
      detailShow:true,
      storeVisible:false,
      productVisible:false,
      deptOption:[],
      storeTableData2:[],
      ruleRangeForm:{},
      tableDataTwo: [],
      merchantFormStore: {
        start: 1,
        limit: 10
      },
      productForm: {
        start: 1,
        limit: 10,
        goodsName: null,
        thirdSpuId: null,
        goodsCategory: null,
        legalRuleId:null,
        productName: "",
        chineseName: "",
        code: "",
        merchantName:null,
        storeName:null,

      },
      storeForm: {
        start: 1,
        limit: 10,
        merchantIds: "",
        storename: "",
        storecode: "",
        orgNumber: "",
        merchantName: "",
        storeType:''
      },
      merchantProductSearchForm: {
          merchantId: null,
          mpCode: null,
          mpName: "",
          categoryName: "",
          legalRuleId:null,
          start: 1,
          limit: 10
        },
      mainStoreMerchantForm: {
        start: 1,
        limit: 10,
      },
      storeSearchForm: {
        storeCode:'',
        storeName:'',
        childId:null,
        merchantName:'',
        storeType:'',
        start: 1,
        limit: 10,
      },
      rulePowerFormRulesFirst:{
            //  legalRuleName: [{ required: true, message: "", trigger: "blur" }],
            // legalRuleType: [{ required: true, message: "", trigger: "change" }],
          },
      rulePowerFormRules: {
          //ruleValue: [{ required: true, message: "请输入必填项", trigger: "blur" }],
          // satisfyOrder: [{ required: true, message: "请输入必填项", trigger: "blur" }],
          // reductionMoney: [{ required: true, message: "请输入必填项", trigger: "blur" }],
      },
      rulePowerForm: {
          rtypeId: "",
          mode:1,
          orderConsume:"",
          deptName:"",
          logisticsIncrement: [{satisfyOrder:null,reductionMoney:null}],
          freightMode:1,
          legalRuleType:'',
          legalRuleName:'',
          ruleValue:null,
      },
      merchantProductTableDataTotal: 0,
      merchantProductTotalCount: 0,
      storeTableDataTatol: 0,
      merchantProductTableData: [],
      repelSelection:[],
      storeTableData: [],
       ruleTypeList: [{
          id: '1',
          ruleName: '购物权益'
        }, {
          id: '2',
          ruleName: '积分权益'
        }, {
          id: '3',
          ruleName: '物流权益'
        }, {
          id: '4',
          ruleName: '活动特权'
        }, {
          id: '5',
          ruleName: '内容特权'
        }, {
          id: '6',
          ruleName: '服务特权'
        }, {
          id: '7',
          ruleName: '等级升级'
        }],
      imgUrl:'',
      activeName: "first",
      merchantTableDataTatolStore: 0,
      HEIGHT: window.innerHeight,
      type: null,
      tableData: [],
      data: [],
      startTime: null,
      endTime: null,
      deptMsg:localStorage.getItem('user'),//当前登录组织信息
      userId: localStorage.getItem("userId"), //当前登录用户id
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      deptName: null,
      content: null,
      size: "small",
      value: 0,
      editLoading: false,
    };
  },
  methods: {
    //添加商品
    saveAllProductInfo(){
      let this_=this;
      if(this.storeTableDataTatol == 0){
        this_.$message({message: "请先添加店铺", type: "error"});return;
      }
      let params={};
      params.legalRuleId=this.id;
      this.utils.request.saveAllProductInfo(params, function (res) {
        if (res.code == "0000") {
           this_.$message({message: "操作成功", type: "success"});
           this_.powerProductSearch();
        } else {
          this_.$message({message: "操作失败, " + res.msg,type: "error"});
        }
      });
    },
    //添加全部店铺
    addAllStore(){
      let params={};
      let this_=this;
      params.legalRuleId=this.id;
      this.utils.request.saveAllStoreInfo(params, function (res) {
        if (res.code == "0000") {
           this_.$message({message: "操作成功", type: "success"});
           this_.storeSearch();
        } else {
          this_.$message({message: "操作失败, " + res.msg,type: "error"});
        }
      });
    },
    // 编辑,修改
      submitForm: function () {
          var this_ = this;
          this.rulePowerForm.id=this_.id;
          if(this_.rulePowerForm.legalRuleType == 3 && this_.rulePowerForm.freightMode == 2){
            this_.rulePowerForm.freightMode=2;
            let temp=this_.rulePowerForm.logisticsIncrement
            let flag=false;
            for(let i=0;i<temp.length;i++){
              if(''==temp[i].satisfyOrder||null==temp[i].satisfyOrder || ''==temp[i].reductionMoney||null==temp[i].reductionMoney){
                this_.$message({message: '下单满减运费规则不能为空!请输入',type: 'error'});
                flag=false
                break;
              }else{
                flag=true;
              }
            }
            if(!flag){
              return;
            }
          }
        this.$refs.rulePowerForm.validate(valid => {
          if (valid) {
              let params = Object.assign({}, this.rulePowerForm);
              this.utils.request.editMemberLegalInfo(params, function (res) {
                if (res.code == "0000") {
                  //this_.$message({message: "操作成功", type: "success"});
                } else {
                  //this_.$message({message: "操作失败, " + res.msg,type: "error"});
                }
              });
          }
        });
      },
    //刷新回显信息
      queryRuleBasic(){
        let this_=this
        let query={}
        query.id=this.id;
        query.start=1;
        query.limit = 10;
        this.utils.request.queryMemberLegalRuleList(query, function (res) {
          if (res.code == '0000') {
              this_.rulePowerForm.id=res.data.rows[0].id;
              this_.rulePowerForm.deptName=res.data.rows[0].deptName;
              this_.rulePowerForm.legalRuleName=res.data.rows[0].legalRuleName;
              this_.rulePowerForm.legalRuleType=res.data.rows[0].legalRuleType;
              if(this_.id !=0){
                this_.queryInfo(res.data.rows[0].legalRuleType,this_.id);
              }
              this_.showGenre();
              //查询权益店铺
              this_.storeSearch();
              //查询权益商品
              this_.powerProductSearch();
          }
        });
      },
      //查询数据渲染表格
      queryInfo(legalRuleType,id){
        let query={};
        let this_=this;
        query.legalRuleType=legalRuleType;
        query.id=id;
        this.utils.request.queryMemberPowerInfo(query,function(res){
          if(res.code == '0000'){
            if(this_.rulePowerForm.legalRuleType==3){
              if(res.data.freightMode==1){
                this_.rulePowerForm.freightMode=res.data.freightMode;
              }else if(res.data.freightMode==2){
                this_.rulePowerForm.freightMode=res.data.freightMode;
                this_.rulePowerForm.logisticsIncrement=res.data.logisticsIncrement.length == 0? this_.rulePowerForm.logisticsIncrement:res.data.logisticsIncrement;
              }
            }else{
                this_.rulePowerForm.ruleValue=res.data.ruleValue;
            }

          }
        })
      },
    //批量删除权益商品
    deletePowerProductsByBatch(){
      if (this.repelSelection.length == 0) {
          this.$message({ message: "删除时至少一条数据", type: "error" });
          return;
        }
      let this_=this;
      let query={};
      let deleteList =[];
      this.repelSelection.forEach(item=>{
        deleteList.push({
          id:item.id,
          mpParentId:item.mpParentId,
        });
      })
      query.productDelete=deleteList;
      this.utils.request.deletePowerProductsByBatch(query,function(res){
        if(res.code == '0000'){
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
        }else{
          this_.$message({ message: '删除失败', type: 'error'});
        }
      })

    },
    //权益商品列表删除方法
    deletePowerProducts(id,mpParentId){
      let this_=this;
      let query={};
      query.id=id;
      query.mpParentId=mpParentId;
      this.utils.request.deletePowerProducts(query,function(res){
        if(res.code == '0000'){
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
        }else{
          this_.$message({ message: '删除失败', type: 'error'});
        }
      })
    },
    //权益商品列表查询
    powerProductSearch(){
      let this_=this;
      this_.merchantProductSearchForm.legalRuleId=this_.legalRuleId == null? this_.id:this_.legalRuleId;
      this.utils.request.querySpuListForTable(this_.merchantProductSearchForm,function(res){
         if (res.code == "0000") {
            this_.merchantProductTableData = res.data.rows;
            this_.merchantProductTableDataTotal = res.data.total;
            this_.merchantProductTotalCount = res.data.totalCount;
        } else if(res.code == '9999'){
            this_.$message({message: res.msg, type:'error'})
        }
      });
    },
    changeDemo(value){
      this.rulePowerForm
    },
    // 删除物流权益
    deelteOrderGivenStairArr(index) {
        this.rulePowerForm.logisticsIncrement.splice(index,1)
    },
    // 新增物流权益
    addOrderGivenStairArr() {
        if(this.rulePowerForm.logisticsIncrement.length>9){
           this.$message({ message: "新增最多不超过十条！", type: "error" });
        }
        this.rulePowerForm.logisticsIncrement.push({})
    },

    // 选择商品
    addSelectionChangeProduct(val) {
      let this_ = this;
      this_.productAddSelection = val;
    },
    // 换页刷新
    producthandleCurrentChange(pageNum) {
      this.productForm.start = pageNum;
      this.productFormFind();
    },
    producthandleSizeChange(pageSize) {
      this.productForm.start = 1;
      this.productForm.limit = pageSize;
      this.productFormFind();
    },
    //权益店铺查询方法
    storeSearch(){
      this.storeSearchForm.legalRuleId=this.id;
      let this_=this;
      this.utils.request.queryPowerStoreList(this.storeSearchForm,function(res){
        if (res.code == "0000") {
             this_.storeTableData=res.data.rows;
             this_.storeTableDataTatol=res.data.total;
            }
      });
    },
    //确定 选择店铺
    AddStore() {
      if(this.addSelectionStoreTableData2.length<1){
        this.$message({message: "最少选择一条数据!", type: "error"});return;
      }
      let params ={};
      let storeList =[];
      let this_=this;
      this.addSelectionStoreTableData2.forEach(element => {
        storeList.push({
          legalRuleId:this_.legalRuleId == null? this_.id:this_.legalRuleId,
          storeId:element.id,
          storeName:element.storeName,
          storeCode:element.storeCode,
          storeType:element.storeType,
          merchantId:element.merchantId,
          merchantName:element.merchantName,
        })
      });
      params.storeList=storeList;
      this.utils.request.savePowerStore(params,function(res){
        if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
              this_.storeSearch();
              this_.storeVisible=false;
            } else {
              this_.$message({ message: "操作失败, " + res.msg, type: "error"});
            }
      });
    },
    //确定 选择商品
    productAddClick() {
      if(this.productAddSelection.length<1){
        this.$message({message: "最少选择一条数据!", type: "error"});return;
      }
      let params ={};
      let productList =[];
      let this_=this;
      this.productAddSelection.forEach(element => {
        productList.push({
          spuId:element.id,
        })
      });
      params.productList=productList;
      params.legalRuleId=this.legalRuleId == null? this.id:this.legalRuleId;
      this.utils.request.savePowerProduct(params,function(res){
        if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
              this_.powerProductSearch();
              this_.storeVisible=false;
            } else {
              this_.$message({ message: "操作失败, " + res.msg, type: "error"});
            }
      });
    },
    //删除选择的店铺
    deletePowerStore(id){
      let this_=this;
      let param={};
      if(id !=null && id !="undefined"){
        param.ids=id;
      }else{
        if(this.storeTableDataSelection.length == 0){
          this_.$message({message:'批量删除时至少选择一条数据', type: 'error'});return;
        }
        param.ids = this.storeTableDataSelection.map(item => item.id);
      }
      this.utils.request.deletePowerStore(param,function(res){
        if(res.code == '0000'){
          this_.$message({message:'操作成功', type: 'success'})
          this_.storeSearch();
          //查询商品
          this_.powerProductSearch();
        }else{
          this_.$message({message:'操作成功', type: 'success'})
        }
      })
    },
    //选择店铺
    storeTableData2AddSelectionChange(val) {
      this.addSelectionStoreTableData2 = val;
    },
     // 换页刷新
    handleSizeChangeStore: function(pageSize) {
      this.storeForm.limit = pageSize;
      this.storeForm.start = 1;
      this.storeFormFind();
    },
    // 换页刷新
    refreshPageRequestStore: function(pageNum) {
      this.storeForm.start = pageNum;
      // this.merchantFormFind();
      this.storeFormFind();
    },
    //商品列表重置
    resetProductTable(){
       //需要校验的key
        let keys = ["categoryName","mpCode","mpName"]
        let boo = this.seachTableUtils.checkFromIsNull(this.merchantProductSearchForm,keys)
        if(!boo){
          return
        }
      this.$refs["merchantProductSearchForm"].resetFields();
      this.powerProductSearch();
    },
    resetStoreForm() {
      //需要校验的key
        let keys = ["storename","storecode","merchantName","storeType"]
        let boo = this.seachTableUtils.checkFromIsNull(this.storeForm,keys)
        if(!boo){
          return
        }
      this.$refs["storeForm"].resetFields();
      this.storeFormFind();
    },
      //查询店铺
    storeFormFind() {
        var this__ = this;
        this.utils.request.queryStorePage(this.storeForm, function(res) {
          if (res.code == "0000") {
              this__.storeTableData2 = res.data.rows;
              this__.merchantTableDataTatolStore = res.data.total;
          }
        });
      },
      add() {
        this.productVisible = true;
        this.tableDataTwo = [];
        this.productFormFind();
      },
       // 商品方法开始
      productFormFind() {
        let that_ = this;
        this.productForm.legalRuleId=this.legalRuleId == null? this.id:this.legalRuleId;
        this.utils.request.querySpuList(this.productForm, function(resp) {
          if (resp.code == "0000") {
            that_.tableDataTwo = resp.data.data.rows.map((ele, index) => {
              let spu = {};
              spu.id = ele.id;
              spu.code = ele.code;
              spu.chineseName = ele.chineseName;
              spu.totalStock = ele.availableStock;
              spu.goodsCategory = ele.categoryName;
              spu.merchantName = ele.merchantName;
              spu.storeName = ele.storeName;
              spu.salePriceScope = ele.salePriceWithTax;
              spu.measureUnit = ele.measureUnit;
              return spu;
            });
            that_.productListTotal = resp.data.data.total;
          }
        });
      },
      handleCurrentChangeMerchantProductTableData(pageNum) {
        this.merchantProductSearchForm.start = pageNum;
        this.powerProductSearch();
      },
      handleSizeChangeMerchantProductTableData(val) {
        this.merchantProductSearchForm.limit = val;
        this.powerProductSearch();
      },
      //
      repelSelectionChange(val) {
        this.repelSelection = val;
      },
      showGenre(){
        let this_=this;
        if(this.legalRuleType !=0 || this.legalRuleType !=null || this.id !=0){
          this_.showType=true;
        }
     },
      //获取基础信息
      queryBasic(){
          this.rulePowerForm.deptName=JSON.parse(this.deptMsg).deptName;
          if(JSON.parse(this.deptMsg).deptType == 0){
            this.rulePowerForm.deptType="母平台"
          }else if(JSON.parse(this.deptMsg).deptType == 1){
            this.rulePowerForm.deptType="子平台"
          }else if(JSON.parse(this.deptMsg).deptType == 2){
            this.rulePowerForm.deptType="商家"
          }else if(JSON.parse(this.deptMsg).deptType == 3){
            this.rulePowerForm.deptType="店铺"
          }
      },
      //上一步
      upStep(data) {
        if (data == 2) {
          this.activeName = "first";
        } else if (data == 3) {
          this.activeName = "second";
        }
      },
      //权益获取下一步
      nextStepRulePower(data) {
        var this_ = this;
        if (data == 1) {
          if(''==this.rulePowerForm.legalRuleName||null==this.rulePowerForm.legalRuleName){
              this.$message({message: '请输入规则名称', type: 'error'});return;
          }
          if(''==this.rulePowerForm.legalRuleType){
            this.$message({message: '请选择权益类型', type: 'error'});return;
          }
          this.activeName = "second";
        } else if (data == 2) {
          var numReg = /^[0-9]+$/
          var numRe = new RegExp(numReg)
          if(this.rulePowerForm.legalRuleType==1){
            if(''==this.rulePowerForm.ruleValue||null==this.rulePowerForm.ruleValue){
                this.$message({message: '请输入必填项',type: 'error'});return;
            }
          }else if(this.rulePowerForm.legalRuleType==2){
            if(''==this.rulePowerForm.ruleValue||null==this.rulePowerForm.ruleValue){
                this.$message({message: '请输入必填项',type: 'error'});return;
            }
          }else if(this.rulePowerForm.legalRuleType==3){
            if(this.rulePowerForm.freightMode == 2){
              let temp=this_.rulePowerForm.logisticsIncrement
              let flag=false;
            for(let i=0;i<temp.length;i++){
              if(''==temp[i].satisfyOrder||null==temp[i].satisfyOrder || ''==temp[i].reductionMoney||null==temp[i].reductionMoney){
                this_.$message({message: '下单满减运费规则不能为空!请输入',type: 'error'});
                flag=false
                break;
              }else{
                flag=true;
              }
            }
            if(!flag){
              return;
            }
            }

          }else if(this.rulePowerForm.legalRuleType==4){
            if(''==this.rulePowerForm.ruleValue||null==this.rulePowerForm.ruleValue){
                this.$message({message: '请输入必填项',type: 'error'});return;
            }
          }else if(this.rulePowerForm.legalRuleType==5){
            if(''==this.rulePowerForm.ruleValue||null==this.rulePowerForm.ruleValue){
                this.$message({message: '请输入必填项',type: 'error'});return;
            }
          }
         //第一次进入
        } else if (data == 3 && this.id ==0) {
          var params = Object.assign({},this.rulePowerForm);
          params.storeMember=2;
          if(this_.rulePowerForm.legalRuleType ==1 || this_.rulePowerForm.legalRuleType ==2 || this_.rulePowerForm.legalRuleType ==3){
            params.status=1;
          }else{
            params.status=2;
          }
          this_.utils.request.editMemberLegalInfo(params, function(res) {
            if (res.code == "0000") {
              if(this_.rulePowerForm.legalRuleType == 1 || this_.rulePowerForm.legalRuleType == 2 || this_.rulePowerForm.legalRuleType ==3){
                this_.$router.push({path:"/AddPower", query:{id:res.data}});
                this_.legalRuleId=res.data;
                this_.id=res.data;
                this_.showGenre();
                this_.activeName = "fourth";
              }else{
                this_.activeName = "fifth";
                this_.$message({ message: "操作成功", type: "success" });
                this_.$refs["rulePowerForm"].resetFields();
              }
            } else {
              this_.$message({ message: "操作失败, " + res.msg, type: "error"});
            }
          });
        //第二次进入
        }else if(data == 3 && this.id !=0){
          this_.activeName = "fourth";
          this_.submitForm();
        }else if(data == 4){
          if(this_.merchantProductTableData.length == 0){
            this_.$message({ message: "请添加商品", type: "warning"});return;
          }
          //如果是流程走完,修改权益主表
          let params={};
          params.status=2;
          params.freightMode=this_.rulePowerForm.freightMode;
          params.id=this_.legalRuleId == null? this_.id:this_.legalRuleId;
          this_.utils.request.editMemberPowerInfo(params,function(res){
             if(res.code == '0000'){
               this_.$message({ message: "操作成功", type: "success" });
               this_.activeName = "fifth";
             }
          })
        }
      },
    // 换页刷新
      mainSroreMerchantHandleSizeChange: function(pageSize) {
        this.storeSearchForm.pageNo = 1;
        this.storeSearchForm.pageSize = pageSize;
        this.storeSearch();
      },
      // 换页刷新
      mainSroreMerchantRefreshPageRequest: function(pageNum) {
        this.storeSearchForm.start = pageNum;
        this.storeSearch();
      },
      storeTableDataselectionChange(val) {
       this.storeTableDataSelection = val;
      },
        //添加店铺
      querySupplierListForAdd2() {
        this.storeVisible = true;
        this.storeTableData2 = [];
        this.storeFormFind();
      },
       //获取子平台列表
      queryDeptOption(){
       let query={}
       let this_=this
       this_.utils.request.queryChildList(query,function(res){
         if(res.code == '0000'){
           this_.deptOption=res.data
         }
       })
      },
      //店铺重置按钮
      resetStoreSearch() {
        //需要校验的key
        let keys = ["childName","storeCode","storeName","merchantName","storeType"]
        let boo = this.seachTableUtils.checkFromIsNull(this.storeSearchForm,keys)
        if(!boo){
          return
        }
        this.$refs["storeSearchForm"].resetFields();
        this.storeSearch();
      },
      resetProductForm(){
        //需要校验的key
        let keys = ["goodsName","thirdSpuId","goodsCategory","merchantName","storeName"]
        let boo = this.seachTableUtils.checkFromIsNull(this.productForm,keys)
        if(!boo){
          return
        }
        this.$refs["productForm"].resetFields();
        this.productFormFind();
      },
     returnRuleList: function() {
      this.rulePowerVisible = false;
      this.ruleConsumeVisible = false;
     },
     //table的双色条纹
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return "warning-row";
        } else if (rowIndex === 3) {
          return "success-row";
        }
        return "";
      },
      //修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return "background-color:rgb(250,250,250);";
        }
      },
      //下拉选
      selectModel(id){
        let obj = {};
        let selectModel = {};
        obj = this.ruleTypeList.find((item)=>{
          if(item.id === id){
            this.selectModel.legalRuleType = id;
            this.selectModel.ruleName = item.ruleName;
            this.rulePowerForm.legalRuleType  = id;
          }
        });
     },
    //返回上一层
    back() {
      this.$router.push({path:"/MemberLegalRule"});
    }
  },
  mounted() {
    this.queryBasic();
    this.queryDeptOption();
    if(this.id !=0){
     this.queryRuleBasic();
    }
  }
};
</script>

<style lang="scss" scoped>
.turnInlineBlock{
  display: inline-block;
}
/deep/ .w326{
 width: 326px !important;
}
.mb120{
  margin-bottom: 120px;
}
.mr60{
  margin-right: 60px !important;
}
.page-container-detail {
  padding: 35px 60px 60px !important;
}
.formItemNoMargin {
  margin-bottom: 0 !important;
}
.centerForm {
  text-align: center !important;
}
.overh{
  overflow: hidden;
}
.formItemNoMarginR{
  /deep/ .el-form-item{
    margin-right: 0 !important;
  }
}
.successImg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.noMarginL {
  margin-left: 0 !important;
}
.textRed {
  color: red !important;
}
/deep/ .inputWidth200{
  width: 200px !important;
}


/deep/ .el-input__inner   {
  width: 200px !important;
}
/deep/ .el-form-item el-label{
      content: '*';
      color: #F56C6C;
      margin-right: 4px;
}
/deep/ .el-tabs__item.is-disabled{
        color: #333333;
        font-size: 16px;
      }
      /deep/ .el-tabs__item{
        padding: 0 30px;
      }
      /deep/ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
      .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
      .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
      .el-tabs--top .el-tabs__item.is-top:nth-child(2){
        padding-left:0
      }
      /deep/ .el-tabs__active-bar{
        height: 4px;
        color: #409EFF;
        border-radius: 2px;
      }
      /deep/ .el-tabs__nav-wrap::after{
        height: 1px ;
      }
      /deep/ .el-tabs__header{
        margin-bottom: 40px !important;
      }
      .pl10{
        padding-left: 10px !important;
      }
      .mb10{
        margin-bottom: 10px !important;
      }
      .pl95{
        padding-left: 95px !important;
      }
      .colorE7{
        color: #E7AA4E !important;
      }
</style>
